<template>
  <div class="container" ref="container">
    <div>
      <!--hot-->
      <div class="hot-city">
        <h2 class="txt-title">热门城市</h2>
        <ul class="hot-list">
          <li @click="toHome(item.name)" class="hot-item" v-for="item of hotCities" :key="item.id">{{ item.name }}</li>
        </ul>
      </div>
      <!--sort-->
      <div class="sort-city">
        <h2 class="txt-title">字母排序</h2>
        <ul class="sort-list">
          <li class="sort-item" @click="jump(key)" v-for="(item,key) of cities" :key="key">{{ key }}</li>
        </ul>
      </div>
      <!--list-->
      <div class="list-city">
        <div :ref="key" v-for="(item,key) of cities" :key="key">
          <h2 class="txt-title">{{ key }}</h2>
          <ul class="list-list">
            <li @click="toHome(city.name)" class="list-item" v-for="city of item" :key="city.id">{{ city.name }}</li>
          </ul>
        </div>
      </div>
    </div>
    <!--回到顶部-->
    <div class="to-top" @click="toTop" ref="toTop">
      <span class="iconfont shang icon"></span>回到顶部
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import {mapMutations} from 'vuex'
export default {
  props: ['hotCities', 'cities'],
  data () {
    return {
      scroll: ''
    }
  },
  mounted () {
    this.$nextTick(()=>{
      if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.container, {
          click: true
        });
      } else {
        this.scroll.refresh();
      };
    });
  },
  methods: {
    jump (key) {
      var dom = this.$refs[key][0]
      // console.log(key,dom)
      // this.scroll.scrollToElement(dom, 1000)
      this.$refs.toTop.style.display = 'block'
      this.scroll.scrollToElement(dom, 1000, 0, 0, 'ease-out')
    },
    toHome (cityName) {
      this.changeCity(cityName)
      this.$router.push('/')
    },
    toTop () {
      this.scroll.scrollToElement(this.$refs.container, 1000, 0, 0, 'ease-out')
      this.$refs.toTop.style.display = 'none'
    },
    ...mapMutations(['changeCity'])
  }
}
</script>

<style scoped lang="stylus">
@import "~css/common.styl"
.container
  position: absolute
  left: 0
  right: 0
  bottom: 0
  top: .88rem
  background-color: #f5f5f5
  z-index: -1
  /* hot */
  .hot-list
    width: 100%
    background-color #fff
    position: relative
    overflow: hidden
    &:before
      content:''
      display: block
      position: absolute
      width: 33.333%
      height: 100%
      left: 33.33%
      border-left: 1px solid #ddd
      border-right: 1px solid #ddd
    .hot-item
      width: 33.333%
      float: left
      text-align: center
      line-height: .9rem
      border-bottom: 1px solid #ddd
      margin-bottom: -1px
      position: relative
  /* sort */
  .sort-list
    width: 100%
    background-color #fff
    overflow: hidden
    .sort-item
      width: 16.666%
      float: left
      text-align: center
      line-height: .9rem
  /* list */
  .list-list
    width: 100%
    background-color #fff
    position: relative
    overflow: hidden
    &:before
      content:''
      display: block
      position: absolute
      width: 25%
      height: 100%
      left: 25%
      border-left: 1px solid #ddd
      border-right: 1px solid #ddd
    &:after
      content:''
      display: block
      position: absolute
      width: 0
      height: 100%
      right: 25%
      border-left: 1px solid #ddd
    .list-item
      width: 25%
      float: left
      text-align: center
      line-height: .9rem
      border-bottom: 1px solid #ddd
      margin-bottom: -1px
      $txtOverflow()
      position: relative
  .to-top
    position: fixed
    right: .4rem
    bottom: .3rem
    color: #1ec9ff
    text-align: center
    display: none
    .icon
      display: block
</style>
